<template>
    <div style=" padding: 10px; display: flex; ">
        <img src="" alt="" style="height: 50px ; width: 50px;">
        <div style="margin-left: 10px;">
            <p style="height: 50%; font-size: 1.2rem; font-weight: 500;">筑梦师01</p>
            <p style="height: 50%; margin-top: 5px; font-size:0.8rem ; ">10级 &nbsp;幻想型筑梦师</p>
        </div>
    </div>
    <div id="presonTag"  style="display: flex; justify-content:space-around; align-items: center;">
            <div v-for="(item,index) in tag" :key="index" 
                style="font-size: 0.7rem; background-color: #C7F4E0; padding: 2px 6px; margin: 5px; border-radius: 10px;">
                {{ item }}
            </div>
    </div>
    <p style="text-align: end; color: #ccc; font-size: 0.7rem; margin-right: 10px; cursor: pointer;" >
        我的主页>>
    </p>
</template>

<script setup>
import { reactive } from "vue";

let tag = reactive(["仙气","常驻","穆穆","类目"])
</script>